<template>
	<view class="container">
		<topbar>修改密码</topbar>
		<view class="content">
			<view class="item">
				<view class="title">
					原密码
				</view>
				<view class="input-box pwd">
					<input class="inp" :password="!isShowOldPassword" placeholder="请输入原密码" v-model="pwdInfo.oldPassword"
						@focus="changePwdVal('oldPassword')" />
					<block v-if="isShowClearPwdIcon1">
						<image class="clean-icon" src="@/static/img/login/clean.png"
							@click="cleanPwdVal('oldPassword')"></image>
						<image class="pwd-icon" src="@/static/img/login/pwd.png" v-if="!isShowOldPassword"
							@click="changShowPwd('oldPassword')"></image>
						<image class="pwd-icon" src="@/static/img/login/pwd-show.png" v-else
							@click="changShowPwd('oldPassword')">
						</image>
					</block>
				</view>
			</view>
			<view class="item">
				<view class="title">
					新密码
				</view>
				<!-- 	<view class="input-box">
					<input type="password" v-model="pwdInfo.newPassword" placeholder="请输入新密码" />
				</view> -->
				<view class="input-box pwd">
					<input class="inp" :password="!isShowNewPassword" placeholder="请输入新密码" v-model="pwdInfo.newPassword"
						@focus="changePwdVal('newPassword')" />
					<block v-if="isShowClearPwdIcon2">
						<image class="clean-icon" src="@/static/img/login/clean.png"
							@click="cleanPwdVal('newPassword')"></image>
						<image class="pwd-icon" src="@/static/img/login/pwd.png" v-if="!isShowNewPassword"
							@click="changShowPwd('newPassword')"></image>
						<image class="pwd-icon" src="@/static/img/login/pwd-show.png" v-else
							@click="changShowPwd('newPassword')">
						</image>
					</block>
				</view>
			</view>
			<view class="item">
				<view class="title">
					确认密码
				</view>
				<!-- <view class="input-box">
					<input type="password" v-model="pwdInfo.confirmPassword" placeholder="请再次输入密码" />
				</view> -->
				<view class="input-box pwd">
					<input class="inp" :password="!isShowConfirmPassword" placeholder="请再次输入密码"
						v-model="pwdInfo.confirmPassword" @focus="changePwdVal('confirmPassword')" />
					<block v-if="isShowClearPwdIcon3">
						<image class="clean-icon" src="@/static/img/login/clean.png"
							@click="cleanPwdVal('confirmPassword')"></image>
						<image class="pwd-icon" src="@/static/img/login/pwd.png" v-if="!isShowConfirmPassword"
							@click="changShowPwd('confirmPassword')"></image>
						<image class="pwd-icon" src="@/static/img/login/pwd-show.png" v-else
							@click="changShowPwd('confirmPassword')">
						</image>
					</block>
				</view>
			</view>
			<Button3 @click="updatePwd">确定</Button3>
		</view>
		<messageTip ref="myMessage"></messageTip>
	</view>
</template>

<script setup lang="ts">
	import { computed, reactive, ref, toRaw } from 'vue';
	import * as loginApi from '@/api/login/login.js'
	import Button3 from '@/components/button3/button3.vue';
	import { useUserStore } from '@/stroes';
	const userStore = useUserStore()
	// console.log(userStore.accountInfo);
	const myMessage = ref()
	const pwdInfo = reactive({
		userId: userStore.accountInfo['user_id'],
		oldPassword: '',
		newPassword: '',
		confirmPassword: ''
	})
	// 是否显示密码框
	const isShowOldPassword = ref(false)
	const isShowNewPassword = ref(false)
	const isShowConfirmPassword = ref(false)
	// 是否显示icon
	const isShowClearPwdIcon1 = ref(false)
	const isShowClearPwdIcon2 = ref(false)
	const isShowClearPwdIcon3 = ref(false)
	// 修改是否显示图标
	const changePwdVal = (type : string) => {
		if (type === 'oldPassword') {
			isShowClearPwdIcon1.value = true;
			isShowClearPwdIcon2.value = false;
			isShowClearPwdIcon3.value = false;
		} else if (type === 'newPassword') {
			isShowClearPwdIcon1.value = false;
			isShowClearPwdIcon2.value = true;
			isShowClearPwdIcon3.value = false;
		} else if (type === 'confirmPassword') {
			isShowClearPwdIcon1.value = false;
			isShowClearPwdIcon2.value = false;
			isShowClearPwdIcon3.value = true;
		}
	}
	// 清空密码
	const cleanPwdVal = (type : string) => {
		pwdInfo[type] = ''
	}
	// 修改是否显示密码
	const changShowPwd = (type : string) => {
		if (type === 'oldPassword') {
			isShowOldPassword.value = !isShowOldPassword.value
		} else if (type === 'newPassword') {
			isShowNewPassword.value = !isShowNewPassword.value
		} else if (type === 'confirmPassword') {
			isShowConfirmPassword.value = !isShowConfirmPassword.value
		}
	}
	// 修改密码
	let isUpadte = true
	const updatePwd = () => {
		isUpadte = false
		if (pwdInfo.oldPassword === '' || pwdInfo.newPassword === '' || pwdInfo.confirmPassword === '') {
			isUpadte = true
			return myMessage.value.open('error', '请将信息输入完整')
		}
		if (pwdInfo.newPassword !== pwdInfo.confirmPassword) {
			isUpadte = true
			return myMessage.value.open('error', '两次密码不一致')
		}
		uni.showLoading({
			title: '修改密码中'
		})
		loginApi.updatePwd(toRaw(pwdInfo)).then(async res => {

			if (res.data && res.data.code === 0) {
				await loginApi.loginOut()
				isUpadte = true
				myMessage.value.open('success', '密码修改成功,请重新登录')
				userStore.accountInfo = {}
				uni.hideLoading()
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/login/login'
					})
				}, 1000)
			} else {
				isUpadte = true
				uni.hideLoading()
				console.log('修改失败');
			}
		})
	}
</script>

<style scoped lang="scss">
	.content {

		padding: 60rpx 32rpx;
		height: 100%;
		border-radius: 8rpx;
		background-color: #fff;

		.item {
			margin-bottom: 40rpx;

			.title {
				margin-bottom: 20rpx;
				font-size: 28rpx;

			}

			.input-box {
				display: flex;
				align-items: center;
				padding: 0rpx 20rpx;
				height: 96rpx;
				font-size: 28rpx;
				border-radius: 8rpx;
				background-color: rgba(208, 215, 228, 0.2);
				box-sizing: border-box;

				&.pwd {
					.clean-icon {
						margin-right: 22rpx;
					}
				}

				.code {
					margin-right: 20rpx;
					padding-right: 20rpx;
					color: #989DA5;
					border-right: 2rpx solid #989DA5;
				}

				.inp {
					flex: 1;
				}

				.clean-icon {
					width: 28rpx;
					height: 28rpx;
					margin-right: 84rpx;
				}

				.pwd-icon {
					width: 36rpx;
					height: 42rpx;
					margin-right: 26rpx;
				}


			}
		}
	}
</style>